<template>
	<view class="picker-content">
		<view class="picker-view-top-bar">
			<view class="cancel" @click="cancel">取消</view>
			<view class="confirm" @click="confirm">确定</view>
		</view>
    <!-- 单项选择器 -->
		<picker-view class="picker-view" v-if="mode =='single'" indicator-style="height: 50px" :value="value" @change="bindChange">
			<picker-view-column>
				 <view class="item" v-for="(item,index) in data" :key="index">{{item}}</view>
			</picker-view-column>			
		</picker-view>
		<!-- 日期选择器 -->
		<picker-view class="picker-view" v-if="mode=='date'" indicator-style="height: 50px" :value="date_value" @change="bindChange">
			<picker-view-column>
			    <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
			</picker-view-column>
			<picker-view-column>
			    <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
			</picker-view-column>
			<picker-view-column v-if="showDay">
			    <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
			</picker-view-column>
		</picker-view>
    <!-- 区域选择器 -->
    <picker-view class="picker-view" v-if="mode=='region'" indicator-style="height: 50px" :value="region_value" @change="bindChange">
    	<picker-view-column>
    	    <view class="item" v-for="(item,index) in data" :key="item.value">{{item.label}}</view>
    	</picker-view-column>
    	<picker-view-column>
    	    <view class="item" v-for="(item,index) in data[region_value[0]].children" :key="index">{{item.label}}</view>
    	</picker-view-column>
    	<picker-view-column>
    	    <view class="item" v-for="(item,index) in data[region_value[0]].children[region_value[1]].children" :key="index">{{item.label}}</view>
    	</picker-view-column>
    </picker-view>
	</view>
</template>

<script>
	// import {initBefore,initHours,initMinutes} from "@/common/before.js";
	export default {
		name: 'DataPicker',
		props: {
			data: {
				type: Array,
				default() {
					return []
				}
			},
			mode: {
				type: String,
				default: 'single'
			},
      showDay: {
        type: Boolean,
        default: false
      },
      showArea: {
        type: Boolean,
        default: true
      },
      // 不允许选择未来时间
      disabledOverDate: {
        type: Boolean,
        default: false
      },
			separator: {
				type: String,
				default: '-'
			}
		},
		emits: ['cancel', 'confirm'],
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			
			for (let i = year - 60; i <= year; i++) {
				years.push(i)
			}
			
			for (let i = 1; i <= 12; i++) {
				if(i<10) i = '0'+i
				months.push(i)
			}
			
			return {
				// data: {},
				value: [0],
				val: [0],
				years,  //年份数组
				year,
				months,  //月份数组
				month,
				days,  //天数组
				day,
				date_value: [60, month-1, day - 1],
        time_value: [], // 默认选择的的时间索引
				dateValue: ''  ,// 日期选择的结果
        singleValue: [] , //单项选择的结果
        // 地区选择
        region_value: [0,0,0]
			}
		},
		mounted() {
			// this.initData()
		},
    computed: {
      
    },
    watch: {
      date_value: {
        handler(newArr) {
          const y = parseInt(this.years[newArr[0]]),
            m = parseInt(this.months[newArr[1]])
          if(y%4 == 0 && m==2) {
            this.computeDays(29)
          }else if(y%4 != 0 && m==2) {
            this.computeDays(28)
          }
          if(m==1||m==3||m==5||m==7||m==8||m==10||m==12) {
            this.computeDays(31)
          } else if(m==4||m==6||m==9||m==11) {
            this.computeDays(30)
          }
        },
        immediate: true
      }
    },
		methods: {
			cancel() {
				this.$emit('cancel')
			},
			confirm() {
        // console.log(this.date_value)
        let val = ''
        let area_id = ''
        if(this.mode == 'single') {
          val = this.data[this.val]
					area_id = this.val[0]
        } else if (this.mode =='date'){
          this.year = this.years[this.date_value[0]]
          this.month = this.months[this.date_value[1]]
          this.day = this.days[this.date_value[2]]
          if(this.showDay) {
            val = `${this.year}${this.separator}${this.month}${this.separator}${this.day}` 
          } else {
            val = `${this.year}${this.separator}${this.month}`
          }
          // 如果不允许选择未来时间
          if (this.disabledOverDate) {
            const currentDate = new Date(this.initDate(this.showDay)).getTime(),
            selecedDate = new Date(val).getTime()
            if (selecedDate > currentDate) {
              uni.showToast({
                title: '不能选择未来时间',
                icon: 'none'
              })
            }
            val = selecedDate > currentDate ? this.initDate(this.showDay) : val
          }
          
        } else {
          const p = this.data[this.region_value[0]].label
          const c = this.data[this.region_value[0]].children[this.region_value[1]].label
          const a = this.data[this.region_value[0]].children[this.region_value[1]].children[this.region_value[2]].label
          area_id = this.data[this.region_value[0]].children[this.region_value[1]].children[this.region_value[2]].value
          if(p == c || c == '直辖市') {           
            val = `${p}${a}`
          }else {
            val = `${p}${c}${a}`
          }
        }
        
				this.$emit('confirm',{val, area_id})
			},
			bindChange(e) {
				const val = e.detail.value
				if(this.mode == 'single') {
					this.val = val
				}
				if(this.mode =='date') {
          this.date_value = val
				}	
        if(this.mode =='region') {
          this.region_value = val
        }
			},
      computeDays(num=31) {
        this.days = []
        for (let i = 1; i <= num; i++) {
        	if(i<10) i = '0'+i
        	this.days.push(i)
        }
      },
			initData() {
				let data = {}
				data = initBefore();
				this.data = data
			},
      // 初始化日期，设置为当天时间
      initDate(showDay = true) {
        let t = ''
        const date = new Date()
        const year = date.getFullYear(),
          month = date.getMonth() + 1,
          day = date.getDate()
        const m = month < 10 ? ('0' + month) : month,
          d = day < 10 ? ('0' + day) : day
        
        if (showDay) {
          t = `${year}${this.separator}${m}${this.separator}${d}`
        } else {
          t = `${year}${this.separator}${m}`
        }
        return t
      },
		}
	}
</script>

<style scoped lang="scss">
	.picker-content {
		background-color: #fff;
    border-radius: 24rpx 24rpx 0 0;
	}
	.picker-view {
	    width: 100%;
	    height: 360rpx;    
	}
	.item {
	  line-height: 100rpx;
	  text-align: center;
	}
	.picker-view-top-bar{
		display: flex;
		justify-content: space-between;
		align-items: center;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.04);
		
		.cancel{
			font-size: 15px;
      opacity: 0.5;
		}
		.confirm{
			font-size: 15px;
			color: $uni-color-primary;
		}
	}
  .indicator-class{
    height: 50px;
    background-color: #222;
  }
</style>
<style>
 /* @media (prefers-color-scheme:dark) {
   .picker-view-top-bar{
      background-color: #222 !important;
    }
  } */
</style>
